import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Button, Card, message } from 'antd';
import ToolCard from './components/ToolCard';
import routes from './route';

const { Option } = Select;

const Tools = () => {
  const [nowTools, setNowTools] = useState(null);
  useEffect(() => {
    console.log(nowTools);
  }, [nowTools]);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div
        style={{
          flex: 1,
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 16,
        }}>
        {routes.map(route => (
          <ToolCard
            key={route.path}
            name={route.name}
            icon={route.icon}
            description={route.description}
            components={route.components}
          />
        ))}
      </div>
    </div>
  );
};

export default Tools;
